import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Card, Radio, Select } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const { Option } = Select;
const FormItem = Form.Item;

@connect(({ loading, user, classes }) => ({
  classList: classes.classList,
  userData: user.currentUser,
  submitting: loading.effects['student/updateStudent'],
}))
@Form.create()
export default class StudentInfor extends PureComponent {
  componentDidMount() {
    this.props.dispatch({
      type: 'classes/fetchClassList',
    });
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'student/updateStudent',
          payload: values,
        });
        this.props.dispatch({
          type: 'user/fetchCurrent',
        });
      }
    });
  };
  render() {
    const { submitting, userData, classList } = this.props;
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 20 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 20 },
        sm: { span: 10 },
        md: { span: 8 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 20, offset: 0 },
        sm: { span: 8, offset: 7 },
      },
    };

    return (
      <PageHeaderLayout title="学生档案">
        <Card bordered={false}>
          <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
            <FormItem {...formItemLayout} label="学 号">
              {getFieldDecorator('sno', {
                initialValue: userData.sno,
                rules: [
                  {
                    required: true,
                    message: '请输入学号',
                  },
                ],
              })(<Input placeholder="学号" disabled />)}
            </FormItem>
            <FormItem {...formItemLayout} label="专业班级">
              {getFieldDecorator('classname',{
                initialValue: userData.classname,
                rules: [
                  {
                    required: true,
                    message: '请输入专业班级',
                  },
                ],
              })(
                <Select placeholder="请选择专业班级" style={{ width: '100%' }}>
                  {classList.map(item => {
                    return (
                      <Option key={item.id} value={item.classname}>
                        {item.classname}
                      </Option>
                    );
                  })}
                </Select>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="姓 名">
              {getFieldDecorator('sname', {
                initialValue: userData.sname,
                rules: [
                  {
                    required: true,
                    message: '请输入姓名',
                  },
                ],
              })(<Input placeholder="姓名" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="性 别">
              {getFieldDecorator('sex', {
                initialValue: userData.sex,
                rules: [
                  {
                    required: true,
                    message: '请选择性别',
                  },
                ],
              })(
                <Radio.Group>
                  <Radio value="男">男</Radio>
                  <Radio value="女">女</Radio>
                </Radio.Group>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="联系电话">
              {getFieldDecorator('phone', {
                initialValue: userData.phone,
                rules: [
                  {
                    required: true,
                    message: '请输入联系电话',
                  },
                ],
              })(<Input placeholder="联系电话" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="家庭地址">
              {getFieldDecorator('address', {
                initialValue: userData.address,
                rules: [
                  {
                    required: true,
                    message: '请输入家庭地址',
                  },
                ],
              })(<Input placeholder="家庭地址" />)}
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32, textAlign: 'center' }}>
              <Button type="primary" size="large" htmlType="submit" loading={submitting}>
                确认修改
              </Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}
